<template>
  <transition>
    <div class="photowall">
      <!-- <v-header :title="titleDesc">
           <p slot="right" v-if="ifMe"  @click="handleChangeTitle(title)">{{title}}</p>
      </v-header> -->
      <scroll style="overflow: hidden; height: 100%" ref="scroll" :bounce="true">
        <div>
            <div class="gridWrapper">
                <grid :cols="2" class="gird">
                  <input ref="selectImg" type="file" @change="selectImg" accept="image/*" multiple style="display: none;"/>
                    <grid-item v-for="(item, index) in photoWallList" :key="item.index" class="gridItem" @click.native="clickImg(photoWallList, index)">
                    <!-- <v-touch ref="tapper" @press="press(index)" :press-options="{time: 1000}" @tap="clickImg(photoWallList, index)"> -->
                        <div :style="{backgroundImage:`url(${item.photoUrl})`}" class="imageItem">
                          <div @click.stop="handleStop">
                            <check-icon :value.sync="item.selected" v-show="ifChecked"></check-icon>
                          </div>
                        </div>
                      <!-- </v-touch> -->
                    </grid-item>
                </grid>
            </div>
        </div>
        <not-data v-if="photoWallList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="handleGetPhotoWall()"></not-data>
      </scroll>
      <div class="bottomDiv" v-if="ifMe">
            <div class="buttonWrapper">
                <x-button :gradients="['#1eb7a7', '#00ceb9']" type="primary" v-show="ifUpload" @click.native="publishDynamic">上传图片</x-button>
                <i class="fa fa-trash-o fa-2x deleteWrapper" aria-hidden="true" v-show="ifDelete" @click="handleDeletePhoto"></i>
            </div>
      </div>
      <!-- 图片阅览 -->
      <div>
          <previewer :list="selectAtlas" @imgLoaded="preImgLoaded" ref="previewer"></previewer>
      </div>
    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import Previewer from '@/components/previewer/previewer'
import { Grid, GridItem, XButton, CheckIcon } from 'vux'
import { localUser } from '@/assets/js/local'
import notData from '@/components/not-data/not-data'
import axios from '@/api/axiosApi'
import uploadFile from '@/api/uploadFile'
export default {
  data () {
    return {
      photoWallList: [],
      selected: false,
      ifChecked: false,
      title: '编辑',
      ifUpload: true,
      ifDelete: false,
      selectAtlas: [],
      ifMe: false,
      titleDesc: '照片墙'
    }
  },
  components: {
    VHeader, Scroll, Grid, GridItem, XButton, CheckIcon, Previewer, axios, localUser, notData
  },
  mounted () {
    this.$refs.scroll.$el.style.height = (window.innerHeight - 64 - 60) + 'px'
  },
  created () {
    if (localUser.get('id') === this.$route.params.userId) {
      this.ifMe = true
    }
    if (!this.ifMe) {
      this.titleDesc = 'Ta的照片墙'
    }
    this.handleGetPhotoWall()
  },
  methods: {
    press (index) {
      this.ifChecked = true
      this.title = '取消'
      this.ifUpload = false
      this.ifDelete = true
    },
    handleChangeTitle (title) {
      if (title === '编辑') {
        this.title = '取消'
        this.ifChecked = true
        this.ifUpload = false
        this.ifDelete = true
      } else if (title === '取消') {
        this.title = '编辑'
        this.ifChecked = false
        this.ifUpload = true
        this.ifDelete = false
      }
    },
    // 上传图片
    publishDynamic () {
      this.$refs.selectImg.dispatchEvent(new MouseEvent('click'))
    },
    selectImg (e) {
      if (e.target.files.length > 5) {
        this.$vux.toast.text('最多只能选5张图片', 'middle')
        return
      }
      uploadFile(this, e.target.files, (data) => {
        let temp = []
        // 上传选择的图片，追加，不是覆盖
        let tempSelected = []
        data.forEach(item => {
          temp.push({
            photoUrl: item.downloadPath
          })
          tempSelected.push(item.downloadPath)
        })
        this.photoWallList = this.photoWallList.concat(temp)
        e.target.value = ''
        this.uploadImagePhoto(tempSelected)
      })
    },
    // 预览图片
    clickImg (imgs, index) {
      this.$vux.loading.show({
        text: '加载中...',
        position: 'absolute'
      })
      let temp = []
      imgs.forEach((img, i) => {
        temp.push({
          src: img.photoUrl
        })
      })
      this.selectAtlas = temp
      this.$nextTick(() => {
        this.$refs.previewer.show(index)
      })
    },
    preImgLoaded () {
      this.$vux.loading.hide()
    },
    handleStop () {},
    // 获取所有的照片墙照片
    handleGetPhotoWall () {
      axios.get(this, '/v1/photos', {userId: this.$route.params.userId}, (data) => {
        data.forEach(item => {
          item.selected = false
        })
        this.photoWallList = data
      })
    },
    // 上传图片
    uploadImagePhoto (uploadImgs) {
      axios.post(this, '/v1/photos', {userId: this.$route.params.userId, photoUrl: uploadImgs.join(',')}, (data) => {
        this.$vux.toast.text('图片上传成功', 'middle')
      })
    },
    handleDeletePhoto () {
      const _self = this
      let count = 0
      let idsList = []
      this.photoWallList.forEach(item => {
        if (item.selected) {
          idsList.push(item.id)
          count += 1
        }
      })
      if (count === 0) {
        this.$vux.toast.text('你未选择任何照片哟', 'middle')
        return
      }
      axios.delete(_self, '/v1/photos', {ids: idsList.join(',')}, (data) => {
        idsList.forEach(i => {
          const idx = _self.photoWallList.findIndex(o => o.id === i)
          if (idx > -1) {
            _self.photoWallList.splice(idx, 1)
          }
        })
        _self.$vux.toast.text('图片删除成功', 'middle')
        this.ifChecked = false
        this.ifUpload = true
        this.ifDelete = false
      })
    }
  },
  watch: {
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'
  .photowall{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: $color-background;
    z-index: 101;
  }

.gridWrapper {
    .gird {
        .gridItem {
            height 150px
            .imageItem {
              text-align right
              margin-top -10  px
              width 100%
              height 130px
              background-size: cover
              background-repeat: no-repeat
            }
        }
    }
}

.bottomDiv {
  width 100%
  height 60px
  background-color white
  position absolute
  bottom 0px
  .buttonWrapper {
     text-align center
     margin-left 3%
     margin-right 3%
     margin-top 2%
     .deleteWrapper {
       margin-top 1%
       color $color-text-2
     }
  }
}
</style>

<style>
  .imageItem .weui-icon-success{
    margin-right: -4px;
    margin-top: -3px;
  }
  .imageItem .weui-icon-circle{
    margin-right: -4px;
    margin-top: -3px;
  }
</style>

